<html>
	<head>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
	</head>
	<body>
		<?php 
			//init
			
			define("WORKSPACE_WIDTH",800);
			$extendedCanvasWidth = 566.66666666667;
			$extendedCanvasHeight = 445.2380952381;
			$bleedXL = 40.47619047619;
			$bleedXR = 121.42857142857;
			$bleedYT = 80.952380952381;
			$bleedYB = 161.90476190476;
			$scale = 0.68539682609593;
			$containerWidthInch = 5.511811018;
			$containerHeightInch = 4.330708657;
			$dpi = 150;
			
			$workspaceWidth = 800;
			$workspaceHeight = 550;
			
			$ROUNDING_FACTOR = 1; //to compensate rounding issues
			
			$url = "/canvas.php?extendedCanvasWidth=$extendedCanvasWidth&extendedCanvasHeight=$extendedCanvasHeight&bleedXL=$bleedXL&bleedXR=$bleedXR&bleedYT=$bleedYT&bleedYB=$bleedYB&scale=$scale&containerWidthInch=$containerWidthInch&containerHeightInch=$containerHeightInch&dpi=$dpi&price=50";
		?>
		<div><b><u>URL:</u></b><br/><a href="<?php echo $url; ?>"><?php echo $url; ?></a></div>
		<div id="resultHolder">Starting the test....</div>
		<div id="resultingImageHolder" class="hidden">test</div>
		<span id="testContent"></span>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#testContent").load("<?php echo $url; ?>");
				$(function(){
					setTimeout(function(){
						doTest();
					},100);
				});
			});
			
			function doTest(){
				$("#resultHolder").html("");
				assert("scaleHolder", "0.68539682609593", $("#testContent #scaleHolder").html());
				assert("containerWidthInchHolder", "5.511811018", $("#testContent #containerWidthInchHolder").html());
				assert("containerHeightInchHolder", "4.330708657", $("#testContent #containerHeightInchHolder").html());
				assert("dpi", "150", $("#testContent #dpi").html());
				
				assert("canvasWidth", "405px", $("#testContent #canvas").css("width"));
				assert("canvasHeight", "203px", $("#testContent #canvas").css("height"));
				assert("canvasMarginLeft", "157.14285278320313px", $("#testContent #canvas").css("margin-left"));
				assert("canvasMarginTop", "133.3333282470703px", $("#testContent #canvas").css("margin-top"));
				
				assert("extendedCanvasWidth", "566px", $("#testContent #extendedCanvas").css("width"));
				assert("extendedCanvasHeight", "446px", $("#testContent #extendedCanvas").css("height"));
				assert("extendedCanvasMarginLeft", "116.66666412353516px", $("#testContent #extendedCanvas").css("margin-left"));
				assert("extendedCanvasMarginTop", "52.380950927734375px", $("#testContent #extendedCanvas").css("margin-top"));
				
				assert("leftLeftOverlayWidth", "117px", $("#testContent #leftLeftOverlay").css("width"));
				assert("leftLeftOverlayHeight", "550px", $("#testContent #leftLeftOverlay").css("height"));
				assert("leftLeftOverlayMarginLeft", "0px", $("#testContent #leftLeftOverlay").css("margin-left"));
				assert("leftLeftOverlayMarginTop", "0px", $("#testContent #leftLeftOverlay").css("margin-top"));
				
				assert("leftOverlayWidth", "40px", $("#testContent #leftOverlay").css("width"));
				assert("leftOverlayHeight", "446px", $("#testContent #leftOverlay").css("height"));
				assert("leftOverlayMarginLeft", "116.66666412353516px", $("#testContent #leftOverlay").css("margin-left"));
				assert("leftOverlayMarginTop", "52.380950927734375px", $("#testContent #leftOverlay").css("margin-top"));
				
				assert("topTopOverlayWidth", "566px", $("#testContent #topTopOverlay").css("width"));
				assert("topTopOverlayHeight", "52px", $("#testContent #topTopOverlay").css("height"));
				assert("topTopOverlayMarginLeft", "116.66666412353516px", $("#testContent #topTopOverlay").css("margin-left"));
				assert("topTopOverlayMarginTop", "0px", $("#testContent #topTopOverlay").css("margin-top"));
				
				assert("topOverlayWidth", "405px", $("#testContent #topOverlay").css("width"));
				assert("topOverlayHeight", "81px", $("#testContent #topOverlay").css("height"));
				assert("topOverlayMarginLeft", "157.14285278320313px", $("#testContent #topOverlay").css("margin-left"));
				assert("topOverlayMarginTop", "52.380950927734375px", $("#testContent #topOverlay").css("margin-top"));
				
				assert("rightRightOverlayWidth", "117px", $("#testContent #rightRightOverlay").css("width"));
				assert("rightRightOverlayHeight", "550px", $("#testContent #rightRightOverlay").css("height"));
				assert("rightRightOverlayMarginLeft", "683.3333129882813px", $("#testContent #rightRightOverlay").css("margin-left"));
				assert("rightRightOverlayMarginTop", "0px", $("#testContent #rightRightOverlay").css("margin-top"));
				
				assert("rightOverlayWidth", "121px", $("#testContent #rightOverlay").css("width"));
				assert("rightOverlayHeight", "446px", $("#testContent #rightOverlay").css("height"));
				assert("rightOverlayMarginLeft", "561.90478515625px", $("#testContent #rightOverlay").css("margin-left"));
				assert("rightOverlayMarginTop", "52.380950927734375px", $("#testContent #rightOverlay").css("margin-top"));
				
				assert("bottomBottomOverlayWidth", "566px", $("#testContent #bottomBottomOverlay").css("width"));
				assert("bottomBottomOverlayHeight", "52px", $("#testContent #bottomBottomOverlay").css("height"));
				assert("bottomBottomOverlayMarginLeft", "116.66666412353516px", $("#testContent #bottomBottomOverlay").css("margin-left"));
				assert("bottomBottomOverlayMarginTop", "497.6190490722656px", $("#testContent #bottomBottomOverlay").css("margin-top"));
				
				assert("bottomOverlayWidth", "405px", $("#testContent #bottomOverlay").css("width"));
				assert("bottomOverlayHeight", "162px", $("#testContent #bottomOverlay").css("height"));
				assert("bottomOverlayMarginLeft", "157.14285278320313px", $("#testContent #bottomOverlay").css("margin-left"));
				assert("bottomOverlayMarginTop", "335.71429443359375px", $("#testContent #bottomOverlay").css("margin-top"));
							
				assert("resultingImageHolderWidth", "827px", $("#resultingImageHolder").css("width"));//5.511811018*150=826.7716527
				assert("resultingImageHolderHeight", "650px", $("#resultingImageHolder").css("height"));//4.330708657*150=649.60629855
			}
			
			function assert(elementName, expectedValue, realValue){
				if(expectedValue == realValue){
					var text = '<div width="700" style="background-color:green;">' + elementName + " ==>  expected: <br/>" + expectedValue + " || got: <br/>" + realValue + "<br/>==> ok" + "</div><hr/>";
					$("#resultHolder").append(text);
				} else {
					var text = '<div width="700" style="background-color:red;">' + elementName + " ==>  expected: <br/>" + expectedValue + " || got: <br/>" + realValue + "<br/>==> nok" + "</div><hr/>";
					$("#resultHolder").append(text);
				}
			}
		</script>
	</body>
</html>